<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>日历</title>
	<style type="text/css">
	.calendar-container{
		width:700px;
		height:700px;
		margin-left:auto;
		margin-right:auto;
		background-color:#23a0f5;
		padding:30px 30px;
	}
	table{
		color:#fff;
		width:100%;
		text-align:center;
		letter-spacing:2px;
		font-family: Arial, "Microsoft YaHei";
	}
	.selected-control{
        height:70px;
        font-size:24px;
	}
	thead span{
		margin-right:60px;
	}
	thead tr:last-child{
		height:60px;
		font-size:20px;
	}
	tbody tr{
		height:48px;
		font-size:18px;
	}
	tbody td{
		position:relative;
	}
	.current-month-number{
		margin-right:15px;
	}
	.arrow{
		cursor:pointer;
	}
	.today{
		border-radius:100%;
		border:2px solid #000;
	}
	.order-num{
		width:25px;
		height:25px;
		line-height:25px;
		font-size:14px;
		top:0px;
		position:absolute;
		border-radius:50%;
		letter-spacing:0px;
	}
	.order-num.pay{
		background-color:#ef602e;
	}
	.order-num.notPay{
		background-color:red;
	}
	.legend{
		float:right;
		margin-right:20px;
		text-align:right;
	}
	.legend div{
		font-size:14px;
		display:inline-block;
	}
	.legend-bar{
		width: 24px;
        height: 10px;
        border: 0px;
        border-radius: 26%;
        margin-right:10px;
	}
	.legend-bar-red{
		background-color: red;
	}
	.legend-bar-orange{
		background-color: #ef602e;
	}
	</style>
</head>
<body>
    <div class="container">
    </div>
    <!-- <div class="calendar-container">
    	<table>
    		<thead>
    			<tr class="selected-control">
    				    <td>&lt;</td>
    				    <td colspan="7"><span class="span-month">06 June</span><span class="span-year">2017</span></td>
    				    <td>&gt;</td>
    				</tr>
    				<tr>
    				    <td>&nbsp;</td>
    				    <td>Sun</td>
    				    <td>Mon</td>
    				    <td>Tue</td>
    				    <td>Wed</td>
    				    <td>Thu</td>
    				    <td>Fri</td>
    				    <td>Sat</td>
    				    <td>&nbsp;</td>
    				</tr>
    		</thead>
    		<tbody>
    			<tr>
    				    <td>&nbsp;</td>
    				    <td>&nbsp;</td>
    				    <td>&nbsp;</td>
    				    <td>&nbsp;</td>
    				    <td>&nbsp;</td>
    				    <td>01</td>
    				    <td>02</td>
    				    <td>03</td>
    				    <td>&nbsp;</td>
    				</tr>
    				<tr>
    				    <td>&nbsp;</td>
    				    <td>04</td>
    				    <td>05</td>
    				    <td>06</td>
    				    <td>07</td>
    				    <td>08</td>
    				    <td>09</td>
    				    <td>10</td>
    				    <td>&nbsp;</td>
    				</tr>
    		</tbody>
    		<tfoot>
    		    <tr>
    		        <td colspan="9">
    		            <div class="legend">
    		               <div class="legend-bar"></div>
    		               <div class="legend-text">含驳回或查验状态业务</div>
    		            </div>
    		        </td>
    		    </tr>
    		</tfoot>
    	</table>
    </div> -->
	<script type="text/javascript" src="../assets/js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			/*function isLeap(year) {
			    return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
			}
			var today = new Date();                
            var y = today.getFullYear();       
            var m = today.getMonth();               
            var d = today.getDate();                
            var firstday = new Date(y, m, 1);       
            var dayOfWeek = firstday.getDay();      
			var days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);         
			var str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); 
			for(var i=0;i<str_nums;i++){
				var html="<tr><td>&nbsp;</td>";
                for(var k=0;k<7;k++){
                	var idx = 7 * i + k; 
                    var date = idx - dayOfWeek + 1;          
					    (date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1;  
					    date == d ? (html+='<td class="today">' + date + '</td>') : (html+='<td>' + date + '</td>');  
					}
					 html+="<td>&nbsp;</td></tr>";
                     $("tbody").append(html);
                }*/
                $(".container").calendar();
               
		});
		(function(root,factory,plugin){
            factory(root.jQuery,plugin);
		})(window,function($,plugin){
			__DEFAULT__={
                url:'../assets/js/testData/orderNum.js',
			    type:'get',
				dataType:'json',
			};
			__PROTOTYPE__={
				_init:function(){
					var containerHtml=
					    "<div class=\"calendar-container\">"+
	    	                "<table>"+
	    		                "<thead>"+
	    			                "<tr class=\"selected-control\">"+
					                    "<td class=\"left-arrow arrow\">&lt;"+
					                    "</td>"+
					                    "<td colspan=\"7\">"+
					                        "<span class=\"current-month-number\">"+
					                        "</span>"+
					                        "<span class=\"current-month\">June"+
					                        "</span>"+
					                        "<span class=\"current-year\">"+
					                        "</span>"+
					                    "</td>"+
					                    "<td class=\"right-arrow arrow\">&gt;"+
					                    "</td>"+
					                "</tr>"+
					                "<tr>"+
					                    "<td>&nbsp;</td>"+
									    "<td>日</td>"+
									    "<td>一</td>"+
									    "<td>二</td>"+
									    "<td>三</td>"+
									    "<td>四</td>"+
									    "<td>五</td>"+
									    "<td>六</td>"+
									    "<td>&nbsp;</td>"+
					                "</tr>"+
	    		                "</thead>"+
	    		                "<tbody>"+
	    			            "</tbody>"+
	    			            "<tfoot>"+
					    		    "<tr>"+
					    		        "<td colspan=\"9\">"+
					    		            "<div class=\"legend\">"+
					    		                "<div class=\"legend-bar legend-bar-red\">"+
					    		                "</div>"+
					    		                "<div class=\"legend-text\">含驳回或查验状态业务"+
					    		                "</div>"+
					    		            "</div>"+
					    		            "<div class=\"legend\">"+
					    		                "<div class=\"legend-bar legend-bar-orange\">"+
					    		                "</div>"+
					    		                "<div class=\"legend-text\">正常状态业务"+
					    		                "</div>"+
					    		            "</div>"+
					    		        "</td>"+
					    		    "</tr>"+
					    		"</tfoot>"+
	    	                "</table>"+
                        "</div>";
                        this.append(containerHtml);
                        this.$curMonth=$(".current-month-number");
                        this.$curMonthEng=$(".current-month");
                        this.$curYear=$(".current-year");
                        this.$leftArrow=$(".left-arrow");
                        this.$rightArrow=$(".right-arrow");
                        this.$arrow=$(".arrow")
                        this.$tbody=$("tbody");
                        this.enMonthArr=["Jan","Feb","Mar","Apr","May","June","July","Aug","Sep","Oct","Nov","Dec"];
                        var curr = new Date();
                        this.$curMonth.text(this.__addZero(curr.getMonth()+1));
                        this.$curYear.text(curr.getFullYear());
                        this.$curMonthEng.text(this.enMonthArr[curr.getMonth()]);
                        this.__generate();
                        this.__bind();
				},
				__isLeap:function(year){
					return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
				},
				__addZero:function(num){
                    return num<10?"0"+num:num;
				},
				__generate:function(){
					var today = new Date();                
		            var y = this.$curYear.text();       
                    var m=parseInt(this.$curMonth.text())-1;
		            var d = today.getDate();                
		            var firstday = new Date(y, m, 1);       
		            var dayOfWeek = firstday.getDay();      
					var days_per_month = new Array(31, 28 + this.__isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);         
					var str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); 
					for(var i=0;i<str_nums;i++){
						var html="<tr><td>&nbsp;</td>";
		                for(var k=0;k<7;k++){
		                	var idx = 7 * i + k; 
		                    var date = idx - dayOfWeek + 1;          
							    (date <= 0 || date > days_per_month[m]) ? date = ' ': date =this.__addZero(idx - dayOfWeek + 1);  
							    (date == d&&m==today.getMonth()) ? (html+='<td class="today" index="'+parseInt(date)+'">' + date + '</td>') : (html+='<td index="'+parseInt(date)+'">' + date + '</td>');  
					    }
							html+="<td>&nbsp;</td></tr>";
		                    this.$tbody.append(html);
		            }
		            this.__load();
				},
				__load:function(){
					var _this=this;
					$.ajax({
						url:_this.url,
						type:_this.type,
						data:{"year":_this.$curYear.text(),"month":_this.$curMonth.text()},
						dataType:_this.dataType,
						success:function(data){
                            var res=data.info;
                            if(res.length){
                                for(var i=0;i<res.length;i++){
                                    $.each(_this.$tbody.find("td"),function(k,n){
                                        if($(n).attr("index")==res[i].index){
                                        	console.log(res[i].type);
                                            $(this).append('<span class="order-num'+' '+res[i].type+'">'+res[i].num+'</span>');
                                        }
                                    });
                                }
                                _this.$orderNum=$(".order-num");
                                _this.$orderNum.parent("td").css("cursor","pointer");
                            }
                            _this.__attach();    
						},
						error:function(a,b,c){
							console.log(b);
						}

					});
				},
				__attach:function(){
                     this.$orderNum.parent("td").on("click",function(){
                    	alert("点击了");
                    })
				},
				__bind:function(){
					var _this=this;
                    this.$arrow.on("click",function(){
                    	_this.curMonthVal=parseInt(_this.$curMonth.text());
                    	if($(this).hasClass("left-arrow")){
                    		if(_this.curMonthVal>1){
                    			_this.curMonthVal--;
                                _this.$curMonth.text(_this.__addZero(_this.curMonthVal));
                                _this.$curMonthEng.text(_this.enMonthArr[_this.curMonthVal-1]);
                    		}else if(_this.curMonthVal==1){
                                _this.$curMonth.text("12");
                                _this.$curMonthEng.text(_this.enMonthArr[parseInt(_this.$curMonth.text())-1]);
                                _this.$curYear.text(parseInt(_this.$curYear.text())-1);
                    		}
                    	}else{
                    		if(_this.curMonthVal<12){
                                _this.curMonthVal++;
                                _this.$curMonth.text(_this.__addZero(_this.curMonthVal));
                                _this.$curMonthEng.text(_this.enMonthArr[_this.curMonthVal-1]);
                    		}else if(_this.curMonthVal==12){
                    			_this.$curMonth.text("01");
                    			_this.$curMonthEng.text(_this.enMonthArr[parseInt(_this.$curMonth.text())-1]);
                                _this.$curYear.text(parseInt(_this.$curYear.text())+1);
                    		}
                    	}
                    	_this.$tbody.find("tr").remove();
                    	_this.__generate();
                    });
				}
			};
            $.fn[plugin]=function(ops){
                $.extend(this,__PROTOTYPE__,__DEFAULT__,ops);
                this._init();
            }
		},"calendar");
	</script>
</body>
</html>